<template>
  <h1>计算属性</h1>
  <h1>姓名<input type="text" v-model="preson.name"></h1>
  <h1>年龄<input type="text" v-model="preson.age"></h1>
  <h1>计算属性{{qun}}</h1>
  <h1>修改计算属性<input type="text" v-model="quan"></h1>
  <button @click="changename">改</button>
</template>

<script>
import {reactive,computed} from 'vue'
export default {
  setup () {
    let preson =reactive({
      name:'张三',
      age:'15'
    })
    //计算属性 简写
    let qun=computed(()=>{
      return preson.name+'666'+ preson.age
    })
    // 计算属性 全写
    let quan =computed({
      get(){
        return preson.name+'666'+ preson.age
      },
      set(val){
        const per=val.split('666')
        preson.name=per[0]
        preson.age=per[1]
      }
    })
    function changename(){
      preson.name='李四'
    }
    return {
      preson,
      changename,
      qun,
      quan
    }
  }
}
</script>

<style lang="less" scoped>

</style>